<div id="main">
    <div>
        <div class="saleItemsHeader">

            <button id="btnDisplayEmployees" class="btn btn-success">Display Employees</button>
            <span>Products</span>
        </div>
        <ul class="saleItems leftFloat">
            <!-- ko template: {foreach:productDetails}  -->
            <li class="mediumProductSquares" >

                <div>
                    <div class="dialogTitleBorder">
                        <span class="borderTitleText">Product Details</span>
                    </div>
                    <div class="photoContainer leftFloat">
                        <img data-bind="visible: Photo, attr: { src: 'images/'+ Photo, alt: Description}" class="photoThumbnail"></img>
                    </div>
                    <div class="leftFloat">
                        <div>
                            <span>Brand: </span><span data-bind="text: Brand" class="textValues"></span>
                        </div>
                        <div>
                            <span>Model: </span><span data-bind="text: ModelName" class="textValues"></span>
                        </div>
                        <div>
                            <span>Price: </span><span data-bind="text: SalePrice" class="textValues">
            </span>
                        </div>
                        <div>

                        </div>
                    </div>
                    <button data-bind="">Add</button>
                </div>
            </li>
            <!-- /ko -->
        </ul>

    </div>
</div>